<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
</head>
<body>
<div id="app">
    <common-head></common-head>
</div>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script>
    const CommonHead = {
        template: `
          <div>
          <h2>渲染商品分类列表</h2>
          <ul>
            <li v-for="cate in cates" :key="cate.id">
              <img :src="cate.icon"/>
              <h4>{{ cate.name }}</h4>
            </li>
          </ul>
          </div>
        `,
        data() {
            return {
                // 1定义初始值
                cates: []
            }
        },
        methods: {
            // 2methods中定义请求函数
            fetchCates() {
                axios.get('https://api.it120.cc/conner/shop/goods/category/all').then(res => {
                    if (res.data.code === 0) {
                        this.cates = res.data.data
                    }
                })
            }
        },
        created() {
            // 3 created调用请求函数
            this.fetchCates();

        }
    }
    Vue.component('CommonHead', CommonHead);
    const vm = new Vue({
        el: '#app'
    })
</script>
</body>
</html>